<template>
  <div class="khml_box">
    <header-comm></header-comm>
    <!-- 表格 -->
    <div class="bcg left_bcg">
      <div class="hedlist">
        <div class="head_box">
          <div class="sele">
            <a-radio-group name="radioGroup" @change="radiotype" :default-value="radiod_checked">
              <a-radio-button value="全部">全部</a-radio-button>
              <a-radio-button value="最新跟进">最新跟进</a-radio-button>
              <a-radio-button value="最多跟进">最多跟进</a-radio-button>
              <a-radio-button value="无跟进客户">无跟进客户</a-radio-button>
            </a-radio-group>
          </div>

          <div class="sele">
            <!-- <span>名称与代码：</span> -->
            <a-auto-complete
              v-model="mcdm"
              :data-source="mcdmData"
              class="global-search sele_input"
              @search="onMcdmSearch"
              @select="onMcdmSelect"
              size="large"
              allowClear
              style="width:300px"
              placeholder="请输入名称与代码"
            >
              <template slot="mcdmData">
                <a-select-option v-for="(mcdm,i) in mcdmData" :key="i">{{mcdm}}</a-select-option>
              </template>
              <a-input>
                <a-button
                  slot="suffix"
                  style="margin-right: -12px;border: 1px solid #d2d2d2;"
                  class="search-btn"
                  size="large"
                >
                  <a-icon type="search" />
                </a-button>
              </a-input>
            </a-auto-complete>
          </div>
          <div class="sele">
            <span>归属公司：</span>
            <!-- <a-select v-model="gsbm_val" @change="handleGsbmChange"   style="width:280px" >
                        <a-select-option :value="gs" v-for="(gs,i) in gsdata" :key="i"  >
                            {{gs}}
                        </a-select-option>
            </a-select>-->
            <a-input class="sele_input" v-model="gsbm" disabled />
          </div>
          <!-- <div class="sele">
            <span>任务人：</span>
            <a-select v-model="rwr_val" @change="handlerwrChange" style="width:150px">
              <a-select-option :value="zd" v-for="(zd,i) in rwrdata" :key="i">{{zd}}</a-select-option>
            </a-select>
          </div>-->
          <div class="sele">
            <a-button type="primary" @click="addnewkh">新增客户</a-button>
          </div>
          <!-- <div class="sele">
                    <span>选择开始日期：</span>
                    <a-date-picker format="YYYY-MM-DD "   style="width:150px" @change="onstartTimeChange" >
                        <template slot="renderExtraFooter">
                            extra footer
                        </template>
                    </a-date-picker>
          </div>-->
          <!-- <div class="sele">
                    <span>选择结束日期：</span>
                    <a-date-picker show-time format="YYYY-MM-DD " :defaultValue="moment(enddate, 'YYYY-MM-DD')"  style="width:150px" @change="onendTimeChange" >
                        <template slot="renderExtraFooter">
                            extra footer
                        </template>
                    </a-date-picker>
          </div>-->
          <!-- v-if="$store.state.tjwz" -->
          <div class="addnew_box" v-if="$store.state.tjwz">
            <div class="tab_bar">
              <a-tabs default-active-key="1" @change="callback">
                <a-tab-pane key="1" tab="新增跟进"></a-tab-pane>
                <a-tab-pane key="2" tab="跟进历史"></a-tab-pane>
              </a-tabs>
            </div>
            <xzgjtk class="tk_box"></xzgjtk>
          </div>
          <!--  v-if="$store.state.wzfl" -->
          <div class="addnew_box" v-if="$store.state.wzfl">
            <div class="tab_bar">
              <a-tabs default-active-key="2" @change="callback">
                <a-tab-pane key="1" tab="新增跟进"></a-tab-pane>
                <a-tab-pane key="2" tab="跟进历史"></a-tab-pane>
              </a-tabs>
            </div>
            <gjlstk class="tk_box tab_close"></gjlstk>
          </div>

          <div class="addnew_box" v-if="$store.state.jsgl">
            <xzlxrlisttk></xzlxrlisttk>
          </div>
          <div class="addnew_box" v-if="$store.state.tjhy">
            <xzshdztk></xzshdztk>
          </div>
          <div class="addnew_box" v-if="$store.state.kpxx">
            <xgkhzltk></xgkhzltk>
          </div>
          <div class="addnew_box" v-if="$store.state.shdz">
            <xzkhtk></xzkhtk>
          </div>
          <!-- <div class="gl_tjwz" v-if="$store.state.xgtj">
                    <xglxr class="gl_tjym"></xglxr>
          </div>-->
          <!-- <div class="gl_tjwz" v-if="$store.state.xggy">
                    <xzlxr class="gl_tjym"></xzlxr>
          </div>-->
        </div>
      </div>
      <div class="xhhzcx_table">
        <a-table
          @change="handleChangelist"
          :loading="loading"
          :columns="columns"
          :pagination="pagination"
          :dataSource="data"
          :rowKey="(record,index)=>{return index}"
        >
          <template slot="DWMC" slot-scope="text, record,">
            <div class="spmc_yc yc">
              <a-tooltip placement="topLeft" :title="record.DWMC">{{record.DWMC}}</a-tooltip>
            </div>
          </template>
          <template slot="lxrq" slot-scope="text, record, index">
            <div>
              <a class="gj_b" href="javascript:;" @click="()=>gjls(record)">{{text==''?'':text}}</a>
              <span class="zw_t" v-if="!text" @click="()=>gjls(record)">暂无</span>
            </div>
          </template>
          <template slot="cz" slot-scope="text, record, index">
            <div class="editable-row-operations">
              <a href="javascript:;" @click="()=>xzgj(record)" class="del">跟进</a>
              <a href="javascript:;" @click="()=>xzlxr(record)" class="del">新增联系人</a>
              <a href="javascript:;" @click="()=>xzshdz(record)" class="del">收货地址</a>
              <a href="javascript:;" @click="()=>xgkhzl(record)" class="del">修改资料</a>

              <!-- <a-dropdown>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a @click="()=>xzgj(record)">新增跟进</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="()=>gjls(record)">跟进历史</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="()=>xzlxr(record)">新增联系人</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="()=>xzshdz(record)">新增收货地址</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="()=>xgkhzl(record)">修改客户资料</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="()=>xzkh(record)">新增客户</a>
                  </a-menu-item>
                </a-menu>
                <a>
                  更多
                  <a-icon type="down" />
                </a>
              </a-dropdown>-->
            </div>
          </template>
        </a-table>
        <!-- <a-pagination
          v-if="isShow"
          :total="totalNum"
          :show-total="total => `共${total} 条数据`"
          @change="onPageChange"
          :page-size="pagination.defaultPageSize"
        />-->
      </div>
    </div>
    <rightnav></rightnav>
  </div>
</template>

<script>
import qs from "qs";
import headerComm from "../../header-comm/header";
import moment from "moment";
import xzgjtk from "./xzgjtk.vue";
import gjlstk from "./gjlstk.vue";
import xzlxrlisttk from "./xzlxrlisttk.vue";
import xzshdztk from "./xzshdztk.vue";
import xgkhzltk from "./xgkhzltk.vue";
import xzkhtk from "./xzkhtk.vue";
import rightnav from "../rightnav.vue";

// import xglxr from "./xglxr.vue";
// import xzlxr from "./xzlxr.vue";
// 引入表格的列
const columns = [
  {
    title: "客户名称",
    dataIndex: "DWMC",
    className: "dwmc_colme",
    scopedSlots: { customRender: "DWMC" }
  },

  {
    title: "余额",
    dataIndex: "KHYE"
  },
  {
    title: "联系人",
    dataIndex: "LXR"
  },
  {
    title: "任务人",
    dataIndex: "RWR",
    filterMultiple: false,
    filters: []
  },
  {
    title: "联系电话",
    dataIndex: "LXDH"
    // scopedSlots: { customRender: "lxdh" }
  },
  {
    title: "最新跟进",
    dataIndex: "lxrq",
    scopedSlots: { customRender: "lxrq" }
  },
  {
    title: "操作",
    dataIndex: "cz",
    width: 400,
    scopedSlots: { customRender: "cz" }
  }
];

export default {
  inject: ["reload"],

  data() {
    return {
      // 表格数据
      data: null,
      columns,
      loading: true,
      //数据库名称
      database: "ERP2_BEARING",
      // ip地址
      ip: "122.112.240.180",
      ceqybm: "7401",
      gsdata: [],
      // 任务人数据
      rwrdata: [],
      pagination: {
        defaultPageSize: 10,
        current: 1,
        showTotal: total => `共 ${total} 条数据`,
        total: 0
      },
      gsbm: "",
      // 制单人默认数据
      rwr_val: "",
      gsbm_val: "",
      // 总条数
      totalNum: 0,
      // 控制页脚隐藏
      isShow: true,
      // 名称代码
      mcdm: "",
      // 名称代码筛选数组
      mcdmData: [],
      // 客户名称
      khmc: "",
      type: "", //客户列表类型：new最新跟进 more最多跟进 no无跟进历史
      khml_type: "",
      call_key: 1,
      radiod_checked: "全部"
    };
  },
  components: {
    headerComm,
    rightnav,
    xzgjtk,
    gjlstk,
    xzlxrlisttk,
    xzshdztk,
    xgkhzltk,
    xzkhtk
    // xglxr,
    // xzlxr,
  },
  methods: {
    callback(key) {
      console.log(key);
      this.call_key = key;
      if (key == 1) {
        this.$store.state.tjwz = true;
        this.$store.state.wzfl = false;
      } else if (key == 2) {
        this.$store.state.tjwz = false;
        this.$store.state.wzfl = true;
      }
    },
    radiotype(e) {
      console.log(e.target.value);
      if (e.target.value == "全部") {
        // this.$router.push("/khml");
        // this.reload();
        sessionStorage.setItem("path_num",12)
        this.reload();
        this.khml_type = "";
      } else if (e.target.value == "最新跟进") {
        this.khml_type = "new";
        sessionStorage.setItem("path_num", 14);

        this.handleChangelist(this.pagination);
        this.reload();
      } else if (e.target.value == "最多跟进") {
        this.khml_type = "more";
        this.reload();

        sessionStorage.setItem("path_num", 15);

        this.handleChangelist(this.pagination);
      } else if (e.target.value == "无跟进客户") {
        this.khml_type = "no";

        sessionStorage.setItem("path_num", 16);

        this.handleChangelist(this.pagination);
        this.reload();
      }
      // if (
      //   this.arrgnqx[this.$store.state.path_num] == "khml" ||
      //   this.arrgnqx[this.$store.state.path_num] == "khml?type=new" ||
      //   this.arrgnqx[this.$store.state.path_num] == "khml?type=more" ||
      //   this.arrgnqx[this.$store.state.path_num] == "khml?type=no"
      // ) {
      // this.$router.push("/" + this.arrgnqx[this.$store.state.path_num]);
      // }
    },
    addnewkh() {
      this.$store.state.shdz = true;
    },
    // 新增跟进弹框
    xzgj(render) {
      console.log(render);
      this.$store.state.tjwz = true;
      sessionStorage.setItem("genjinInfo", JSON.stringify(render));
    },
    // 跟进历史弹框
    gjls(render) {
      console.log(render);
      this.$store.state.wzfl = true;
      sessionStorage.setItem("genjinInfo", JSON.stringify(render));
    },
    // 新增联系人弹框
    xzlxr(render) {
      console.log(render);
      this.$store.state.jsgl = true;
      sessionStorage.setItem("genjinInfo", JSON.stringify(render));
    },
    // 新增收货地址弹框
    xzshdz(render) {
      console.log(render);
      this.$store.state.tjhy = true;
      sessionStorage.setItem("genjinInfo", JSON.stringify(render));
    },
    // 修改客户资料弹框
    xgkhzl(render) {
      console.log(render);
      this.$store.state.kpxx = true;
      sessionStorage.setItem("genjinInfo", JSON.stringify(render));
    },
    // 新增客户弹框
    xzkh(render) {
      console.log(render);
      this.$store.state.shdz = true;
      sessionStorage.setItem("genjinInfo", JSON.stringify(render));
    },
    // 名称代码查询
    onMcdmSelect(e) {
      console.log(e);
      this.mcdm = e;
      this.handleChangelist(this.pagination);
    },
    onMcdmSearch(e) {
      console.log(e);
      this.mcdm = e;
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        // console.log("防抖...");
        this.pagination.current = 1;
        this.onSearch();
        this.timer = undefined;
      }, 100);
    },
    // 搜索查询
    onSearch() {
      this.handleChangelist(this.pagination);
    },
    // 分页数据展示
    onPageChange(current) {
      console.log(current);
      this.pagination.current = current;
      this.handleChangelist(this.pagination);
    },
    // 表格数据
    handleChangelist(pagination, filters) {
      console.log(filters);
      if (filters) {
        if (Object.keys(filters).length > 0) {
          this.rwr_val = filters.RWR[0];
        }
      }
      this.pagination.current = pagination.current;
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_khdacx.php?page=" +
            pagination.current +
            "&gsbm=" +
            this.gsbm +
            "&pageSize=" +
            pagination.defaultPageSize +
            "&type=" +
            this.khml_type,
          qs.stringify({
            token: sessionStorage.getItem("smt_token"),
            khmc: this.khmc,
            cxdm: this.mcdm,
            rwrall: this.rwrdata + "",
            rwr: this.rwr_val
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.result) {
            this.data = res.data.result;
            this.loading = false;
            this.isShow = true;
            // console.log(this.data)
            this.pagination.total = Number(res.data.totalNum);
            let mcdmsj = [];
            for (var i = 0; i < this.data.length; i++) {
              mcdmsj.push(this.data[i].DWMC);
            }
            // 名称代码筛选
            this.mcdmData = mcdmsj;
            this.mcdmData = new Set(mcdmsj);
            this.mcdmData = Array.from(this.mcdmData);
            this.mcdmData = this.mcdmData.filter(function(s) {
              return s && s.trim();
            });
          } else {
            this.totalNum = Number(0);
            this.data = [];
            this.mcdmdata = [];
            this.loading = false;
            this.isShow = false;
          }
        });
    },

    getsamtloginNew() {
      //   if(res.data[ii].gsbm==this.gsbm){
      if (sessionStorage.getItem("gsbm") == this.gsbm) {
        var rwrall = sessionStorage.getItem("xsuser");
        var laststr = rwrall.substr(-1);
        if (laststr == "|") {
          rwrall = rwrall.substr(0, rwrall.length - 1);
        }
        rwrall = rwrall.split("|");
        var new_arr = [];
        for (var i = 0; i < rwrall.length; i++) {
          var items = rwrall[i];
          //判断元素是否存在于new_arr中，如果不存在则插入到new_ar中
          if ($.inArray(items, new_arr) == -1) {
            new_arr.push(items);
          }
        }
        rwrall = new_arr;
        this.rwrall = new_arr;

        console.log(this.rwrall);

        if (rwrall.length > 1) {
          rwrall.unshift("查所有");
        }
        this.zdrdata = rwrall;
        this.rwrdata = rwrall;
        let arr = [];
        for (var i = 0; i < this.zdrdata.length; i++) {
          let obj = {};
          obj.text = this.zdrdata[i];
          obj.value = this.zdrdata[i];
          console.log(obj);
          arr.push(obj);
        }
        for (var i = 0; i < this.columns.length; i++) {
          if (this.columns[i].title == "任务人") {
            this.columns[i].filters = arr;
          }
        }
        this.rwr_val = this.rwrall[0];
        this.zdr_val = rwrall[0];
        // this.handleChangelist(this.pagination);
      }
      // this.axios
      //     .post(
      //     "https://yb.bearing.cn/wxapi/samtloginNew.php?SQDWID=7401&phone=13359211499&fkphone=" +
      //         this.$store.state.bbl_phone +
      //         "&openid=&zctopenid=",
      //     qs.stringify({
      //         token:sessionStorage.getItem('smt_token'),
      //     })
      //     )
      //     .then(res => {
      //     console.log(res);

      //     if (res.data != 0) {
      //         for (var ii = 0; ii < res.data.length; ii++) {
      //             if(res.data[ii].gsbm==this.gsbm){
      //                 var rwrall =res.data[ii].xsuser
      //                 var laststr = rwrall.substr(-1)
      //                 if (laststr == '|') {
      //                     rwrall = rwrall.substr(0, rwrall.length - 1)
      //                 }
      //                 var rwrall = rwrall.split('|');
      //                 this.rwrall=rwrall;
      //                 if (rwrall.length > 1) {
      //                     rwrall.unshift('查所有')
      //                 }
      //                 this.zdrdata=rwrall;
      //                 let arr=[];
      //                 for(var i=0;i<this.zdrdata.length;i++){
      //                     let obj={};
      //                     obj.text=this.zdrdata[i]
      //                     obj.value=this.zdrdata[i];
      //                     console.log(obj)
      //                     arr.push(obj)
      //                 }
      //                  for(var i=0;i<this.columns.length;i++){
      //                     if (this.columns[i].title == "任务人") {
      //                         this.columns[i].filters = arr;
      //                     }
      //                 }
      //                 this.rwr_val=this.rwrall[0];
      //                 this.zdr_val=rwrall[0];
      //                 this.handleChangelist(this.pagination)
      //                 }

      //         }
      //     } else {
      //         console.log("没有权限");
      //     }
      //     });
    },
    //任务人选择
    handlerwrChange(value) {
      console.log(value);
      this.rwr_val = value;
      console.log(this.rwr_val);
      this.onSearch();
    }
  },
  created() {
    // this.getgsbm();
    this.gsbm = sessionStorage.getItem("gsbm");

    this.khml_type = this.$route.query.type;
    console.log(this.khml_type);

    var path_num = sessionStorage.getItem("path_num");
    if (path_num == 14) {
        this.khml_type = "new";
      this.radiod_checked = "最新跟进";
    }else if(path_num == 15){
        this.khml_type = "more";

      this.radiod_checked = "最多跟进";

    }else if(path_num == 16){
        this.khml_type = "no";

      this.radiod_checked = "无跟进客户";

    }else{
        this.khml_type = "";
      this.radiod_checked = "全部";

    }
    this.getsamtloginNew();

    this.handleChangelist(this.pagination);

    //在页面加载时读取sessionStorage里的状态信息
    // if (sessionStorage.getItem("store") ) {
    //     this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    // }

    // //在页面刷新时将vuex里的信息保存到sessionStorage里
    // window.addEventListener("beforeunload",()=>{
    //     sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    // })
  }
};
</script>

<style lang='less' >
.khml_box {
  .hedlist {
    position: fixed;
    z-index: 999;
    width: 71%;
    left: 10%;
    top: 50px;
    height: 90px;
    line-height: 60px;
    background-color: #f3f7f9;
    .head_box {
      width: 100%;
      display: flex;
      // justify-content: space-around;
      background-color: #fff;
      flex-wrap: wrap;
      .sele {
        margin: 0 20px;
        text-align: center;
        position: relative;
        .sele_input {
          width: 170px;
        }
        .ant-radio-button-wrapper-checked {
          background-color: #fff !important;
        }
        .ant-select-selection__clear {
          right: 50px;
        }
        .ant-select-auto-complete.ant-select .ant-input {
          height: 32px !important;
        }
        .ant-btn-lg {
          height: 32px !important;
        }
        .search {
          position: absolute;
          top: 8px;
          right: 15px;
          font-size: 18px;
        }
      }
      .gl_tjwz {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999999999;
        height: 930px;

        // .gl_tjym {
        //   position: absolute;
        //   width: 80%;
        //   left: 50%;
        //   transform: translateX(-50%);
        // }
      }
      .rqsele {
        width: 39%;
        margin-bottom: 15px;
      }
      .list_head {
        display: inline-block;
        margin-right: 10px;
      }
      .ssgs_box {
        display: inline-block;
        margin-right: 20px;
      }
    }
    .ant-tabs-bar {
      border: 0 !important;
    }
  }
  .bcg {
    width: 90%;
    background-color: #f3f7f9 !important;
    position: relative;
    left: 10%;
    min-height: 1000px;
    .xhhzcx_table {
      position: relative;
      left: 1%;
      top: 140px;
      width: 98%;
      text-align: left;
      padding: 20px;
      background: #fff;
      .dwmc_colme {
        width: 150px;
      }
      .yc {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .spmc_yc {
        width: 150px;
      }
      .ant-table-thead {
        background-color: #ccc !important;
      }
      .ant-table-tbody {
        background: #fff !important;
        .ant-dropdown-trigger {
          margin-left: 20px;
        }
      }
    }
    .ant-pagination {
      float: right !important;
      margin-top: 20px;
    }
  }
  .prev_btn {
    position: relative;
    top: 15px;
    left: 650px;
    margin-bottom: 30px;
  }
  .next_btn {
    position: relative;
    top: 15px;
    left: 675px;
    margin-bottom: 30px;
  }
  /deep/.ant-select-auto-complete.ant-select-lg .ant-input {
    height: 30px;
  }
  /deep/.ant-input-affix-wrapper .ant-input-prefix :not(.anticon),
  .ant-input-affix-wrapper .ant-input-suffix :not(.anticon) {
    height: 30px;
    border: 0;
    left: 0;
    background: transparent;
  }
  .addnew_box {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    height: 1000px;
    z-index: 999;
    .bjd_tit {
      text-align: left;
    }
    .ant-tabs {
      text-align: left;
      padding: 40px 40px 10px;
    }
  }
}

.tab_bar {
  position: absolute;
  top: 5%;
  left: 44%;
  transform: translateX(-50%);
  width: 44%;
  height: 50px;
  background: #fff;
  text-align: center;
  z-index: 99999;
}
.tab_close {
  .close {
    top: 0;
  }
}

.bjtk {
  position: absolute;
  z-index: 9999;
  width: 55%;
  // max-height: 700px;
  min-height: 550px !important;
  background-color: #fff;
  text-align: center;
  padding: 20px;
  top: 5% !important;
  left: 50%;
  transform: translateX(-50%);
}
.zw_t {
  cursor: pointer;
  color: #999;
}
.gj_b {
  // border-bottom: 1px solid #ccc;
  text-decoration: underline;
}
</style>